<template>
	<view>
		<view v-if="blogs.length==0" class="none">
			<image src="/static/icons(1)/nodata.png" mode="widthFix" class="logo"></image>
			<text>{{ txtNoData}}</text>
		</view>
		<view v-else v-for="(item, index) in blogs" :key="item.id" class="item-container">
			<text class="item-title">{{item.title}}</text>
			<rich-text :nodes="item.description" class="item-desc"></rich-text>
			<image :src="item.picture" mode="widthFix" class="item-focus"></image>
			<image :src="item.user.avatar" mode="aspectFill" class="item-avatar"></image>
			<view>
				<text v-for="(tag, idx) in item.tags" :key="tag" class="item-tag">{{ tag }}</text>
			</view>
			<view class="icon-container">
				<image src="/static/icons(1)/ic_good.png" class="icon"></image>
				<text class="icon-text">{{ item.good }}</text>
				<image src="/static/icons(1)/ic_comment.png" class="icon"></image>
				<text class="icon-text">{{ item.comments.length }}</text>
				<image src="/static/icons(1)/ic_count.png" class="icon"></image>
				<text class="icon-text">{{ item.readCount }}</text>
			</view>
			<image src="/static/icons(1)/ic_tag.png" class="icon-tag"></image>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				txtNoData: "没有数据,请刷新！",
				blogs: [],
				page: 0,
				size: 3,
				count: -1,
			}
		},
		onLoad() {
			this.getPagedBlogs()
		},
		onPullDownRefresh() {

		},
		onReachBottom() {
			if (this.blogs.length == this.count) {
				return
			}
			this.page++
			this.getPagedBlogs()
		},
		methods: {
			getPagedBlogs() {
				let header = {
					"content-type": "application/json;charset=UTF-8",
					"page": this.page,
					"size": this.size
				}
				this.$req.getWithParams(this.$params.host + this.$params.action_blogs_page, header, res => {
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture
						blog.user.avatar = this.$params.host + blog.user.avatar
					})
					this.blogs = [...this.blogs, ...res.data.data]
					this.conut = parseInt(res.data.message)
				})
			},

			getTopBlogs() {
				this.$req.get(this.$params.host + this.$params.action_top_blogs, res => {
					console.log(res.data);
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture
						blog.user.avatar = this.$params.host + blog.user.avatar
					})
					this.blogs = res.data.data
				});
			}
		}
	}
</script>

<style>
	@import url("index.css");
</style>